<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/detail.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
</head>
<body>
	<div class="shortcut">
		<div class="w">
			<div class="fl">
				<ul>
					<li>优购商城欢迎你！&nbsp</li>
					<li>
						<a href="#">请登录</a>
						<a href="#" class="style-red">免费注册</a>
					</li>
					
				</ul>
			</div>
			<div class="fr">
				<ul>
					<li>
						<a href="#">我的订单</a>						
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">我的优购</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					<li class="spacer"></li>
					<li><a href="#">优购商城会员</a></li>
					<li class="spacer"></li>
					<li><a href="#">企业采购</a></li>
					<li class="spacer"></li>
					<li>
						<a href="#">关注优购商城</a>
						<i class="iconfont icon-jiantou9">
						</i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">客户服务</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">网站导航</a>
						<i class="iconfont icon-jiantou9"></i>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
	<div class="header w">
		<div class="logo">
			<h1><a href="index.html" title="品优购">品优购</a></h1>
		</div>
		<div class="search">
			<input  type="text" class="searchInput" value="请搜索内容"/>
			<button class="searchBtn">搜索</button>
		</div>
		<div class="hotwords">
			<a href="#" class="style-red">优惠购首发</a>
			<a href="#">9.9元团购</a>
			<a href="#">办公用品</a>
			<a href="#">电脑</a>
			<a href="#">同行</a>
		</div>
		<div class="shopcart">
			<i class="iconfont icon-gouwuche"></i>
			<a href="#">我的购物车</a>
			<i class="iconfont icon-youjiantou"></i>
			<div class="count">555</div>
		</div>
	</div>
	<div class="nav">
		<div class="w">
			<div class="dropdown fl">
				<div class="dt">全部商品</div>
				<div class="dd" style="display: none;">
					<ul>
						<li class="menu_item">
							<a href="#">家用电器</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">通信</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">手机</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">电脑办公</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">家居用品</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">化妆品</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">箱包鞋子</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">运动用品</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li class="menu_item">
						<li class="menu_item">
							<a href="#" >汽车</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">母婴玩具</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">食品生鲜</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">医药保健</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">图书音像</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">旅行</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
						<li class="menu_item">
							<a href="#">众筹保险</a>
							<i class="iconfont icon-youjiantou fr"></i>
						</li>
					</ul>
				</div>
			</div>
			<div class="navitem fl">
				<ul>
					<li><a href="#">服装城</a></li>
					<li><a href="#">美妆馆</a></li>
					<li><a href="">传智超市</a></li>
					<li><a href="">全球购</a></li>
					<li><a href="">闪购</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">拍卖</a></li>
					<li><a href="">有趣</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="de_container w">
		<div class="crumb_wrap">
			&gt;<a href="#">手机、数码、通讯</a>
			&gt;<a href="#">手机</a>
			&gt;<a href="#">Apple苹果</a>
			&gt;<a href="#">iphone 6s Plus类</a>
		</div>
		<div class="product_intro clearfix">
			<div class="preview_wrap fl">
				<div class="preview_img">
				<img src="upload/8788a4743af36f36.jpg">
			    </div>
			    <div class="preview_list">
			    	<ul class="list_item">
			    		<li><img src="upload/8788a4743af36f36 (1).jpg"></li>
			    		<li class="current"><img src="upload/973b28037185b5b3 (1).jpg"></li>
			    		<li><img src="upload/973b28037185b5b3 (1).jpg"></li>
			    		<li><img src="upload/973b28037185b5b3 (1).jpg"></li>
			    		<li><img src="upload/973b28037185b5b3 (1).jpg"></li>
			    	</ul>
			    	<a href="#" class="arrow_prev"><i class="iconfont icon-zuojiantou1"></i></a>
			    	<a href="#" class="arrow_next"><i class="iconfont icon-youjiantou"></i></a>
			    </div>
			</div>
			<div class="itemInfo_wrap fr">
				<div class="sku_name">Apple iPhone XS (A2100) 64GB 深空灰色 移动联通电信4G手机
				</div>
				<div class="news">Phone11系列抢券至高减1900，iPhone11到手价低至4799元！
				</div>
				<div class="summary">
					
						<dl class="summary_price">
							<dt>价格</dt>
							<dd><i class="price">¥5000</i>
								<a href="#">减价通知</a>
								<div class="remark">累计评价45678</div>
								
							</dd>
						</dl>

					  <dl class="summary_promotion">
							<dt>促销</dt>
							<dd>
		                        <em>换购</em>&nbsp;&nbsp;购买1件可优惠换购热销商品 
							    <a href="#">详情</a>
								
							</dd>
					  </dl>

					  <dl class="summary_support">
					  	<dt>支持</dt>
					  	<dd>以旧换新，闲置手机回收，4G套餐超值</dd>
					  </dl>

					  <dl class="summary_address">
					  	<dt>配送至</dt>
					  	<dd>广东广州市白云区城区
                              无货，此商品暂时售完 由 京东 发货, 并提供售后服务.</dd>
					  </dl>

					  <dl class="chooseColor">
					  	<dt>选择颜色</dt>
					  	<dd>
					  		<a href="#">金色</a>
					  		<a href="#" class="current">玫瑰金</a>
					  		<a href="#">黑色</a>
					  		<a href="#">白色</a>
					  	</dd>
					  </dl>

					  <dl class="choose_version">
					  	<dt>选择版本</dt>
					  	<dd>
					  		<a href="#" class="current">公开版</a>
					  		<a href="#">移动4G</a>
					  	</dd>
					  </dl>

					   <dl class="choose_type">
					  	<dt>官方标配</dt>
					  	<dd>
					  		<a href="#" class="current">公开版</a>
					  		<a href="#">移动优惠购</a>
					  		<a href="#">移动4G</a>
					  	</dd>
					  </dl>

					  <div class="choose_btns">
					  	<div class="choose_amount fl">
					  		
					  			<input type="" name="" value="1" />
					  		
					  			<a href="javascript:;" class="add">+</a>
					  			<a href="javascript:;" class="reduce">-</a>
					  		

					  	</div>
					  	<a href="#" class="addCard fl">加入购物车</a>
					  </div>
				  
				  


			    </div>
			  
					
					
			</div>
		</div>

		<div class="product_detail clearfix">
			<div class="aside fl">
				<div class="tab_list">
					<ul>
						<li class="first_tab">相关分类</li>
						<li class="second_tab">推荐品牌</li>
					</ul>
				</div>
				<div class="tab_con">
					<ul>
						<li>
							<img src="upload/d9418330ab754826.jpg!q70.jpg">
							<h5 class="title">三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通</h5>
							<div class="aside_price">¥3500</div>
							<a href="#" class="as_addcar">加入购物车</a>
							
						</li>
						<li>
							<img src="upload/d9418330ab754826.jpg!q70.jpg">
							<h5 class="title">三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通</h5>
							<div class="aside_price">¥3500</div>
							<a href="#" class="as_addcar">加入购物车</a>
							
						</li>
						<li>
							<img src="upload/d9418330ab754826.jpg!q70.jpg">
							<h5 class="title">三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通</h5>
							<div class="aside_price">¥3500</div>
							<a href="#" class="as_addcar">加入购物车</a>
							
						</li>
						<li>
							<img src="upload/d9418330ab754826.jpg!q70.jpg">
							<h5 class="title">三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通</h5>
							<div class="aside_price">¥3500</div>
							<a href="#" class="as_addcar">加入购物车</a>
							
						</li>
						<li>
							<img src="upload/d9418330ab754826.jpg!q70.jpg">
							<h5 class="title">三星 Galaxy S10(SM-G9730)骁龙855超感屏 超声波屏下指纹 4G手机 全网通</h5>
							<div class="aside_price">¥3500</div>
							<a href="#" class="as_addcar">加入购物车</a>
							
						</li>
					</ul>
					
				</div>
			</div>
			<div class="detail fr">
				<div class="detail_tab_list">
					<ul>
						<li class="current">商品介绍</li>
						<li>规格与包装</li>
						<li>售后保障</li>
						<li>商品评价</li>


					</ul>
				</div>
				<div class="detail_tab_con">
					<div class="item" style="display:block">
						<ul class="item_info">
							<li>商品名称：AppleiPhone XS</li>
							<li>商品名称：AppleiPhone XS</li>
							<li>商品名称：AppleiPhone XS</li>
							<li>商品产地：中国</li>
						</ul>
						<p>
							<a href="#" class="more">查看更多参数<i class="iconfont icon-jiantou9"></i></a>
						</p>
						<div class="item_img">
						<img src="upload/8bdd52bf99d146a5.png">
						<img src="upload/bb3b6e6c7795c2ba.jpg">
						<img src="upload/43735fdac08d3917.jpg">
					    </div>
					</div>
					<div class="item">
						规格与包装内容
					</div>
					<div class="item">
						售后服务内容
					</div>
					<div class="item">
						商品评价内容
					</div>
				</div>
			</div>
		</div>
	    

	</div>

	<div class="footer">
		<div class="w">
			<div class="mod_service">
				<ul>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
					<li>
						<div class="iconLeft"><i class="iconfont icon-daohangshouye"></i></div>
						<div class="text">轻松购物</div>
					</li>
				</ul>
			</div>
			<div class="mod_help">
				
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
				
			</div>

			<div class="mod_copyright">
				<p class="mod_copyright_link">
					
					<a href="#">关于我们</a>											
					<a href="#">联系我们</a>						
                    <a href="#">联系客服</a>
					<a href="#">商家入驻</a>				
					<a href="#">友情链接</a>
					<a href="#">公益社区</a>				
					<a href="#">销售联盟</a>
						
					
				
				</p>
				<p class="mod_copyright_info">
					增值电信业务经营许可证： 浙B2-20110446 市场名称登记证：工商网市字3301004119号
					 <br>出版物网络交易平台服务经营备案证： 新出发浙备字第001号
                    互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com 
				</p>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
	$(".detail_tab_list li").click(function(){
  $(this).addClass("current").siblings().removeClass("current");
  var index=$(this).index();
  $(".detail_tab_con .item").eq(index).show().siblings().hide();
  console.log($(".detail_tab_con div"));
	});
	$(".dropdown .dt").click(function(){
		console.log($(".dropdown .dt"));
		/*$(".dropdown .dd").show()*/
		$(".dropdown .dd").slideToggle();;
	})
</script>
</html>